"use client"

import { useState, useEffect } from "react"
import Image from "next/image"
import Link from "next/link"
import Navbar from "@/components/navbar"
import Footer from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent } from "@/components/ui/card"
import CoinIcon from "@/components/CoinIcon"
import Emoji from "@/components/Emoji"
import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from "recharts"

import { BrowserProvider, parseEther } from "ethers"
import { Contract, parseUnits } from "ethers"

export default function PreSalePage() {
  const [selectedCurrency, setSelectedCurrency] = useState("USDT")
  const [paymentAmount, setPaymentAmount] = useState("")
  const [isConnected, setIsConnected] = useState(true)
  const [showOrders, setShowOrders] = useState(false)
  
  const [walletAddress, setWalletAddress] = useState<string | null>(null)
  const [provider, setProvider] = useState<BrowserProvider | null>(null)
  const [recipient, setRecipient] = useState("")
  const [amount, setAmount] = useState("")
  // buynow sendTransaction
  const RECIPIENT_ADDRESS = "0x6EaC6A279ACCB130eC2A8621E946386Bb474E1c0"
  const USDT_CONTRACT_ADDRESS = "0xdAC17F958D2ee523a2206206994597C13D831ec7"  // Ethereum Mainnet USDT
  const ARB_USDT_CONTRACT_ADDRESS = "0xfd086bc7cd5c481dcc9c85ebe478a1c0b69fcbb9"  // Arbitrum USDT

  const ERC20_ABI = [
	"function transfer(address to, uint256 amount) returns (bool)"
  ]
  // exchangerate fetch
  const BASE_URL = "http://localhost/dev-api";
  const [exchangeRates, setExchangeRates] = useState<Record<string, number>>({
	  ETH_USDT: 0.02,
	  BERA: 0.0,
	  ARB_USDT: 0.02
	})
	
  // sale info
  const [targetAmount, setTargetAmount] = useState(0)
  const [currentAmount, setCurrentAmount] = useState(0)
  const [progressPercentage, setProgressPercentage] = useState(0)

  const connectWallet = async () => {
    try {
      if (typeof window === "undefined" || !(window as any).ethereum) {
        alert("Install OKX Or MetaMask Wallet Please")
        return
      }

      await (window as any).ethereum.request({ method: "eth_requestAccounts" })
      const ethersProvider = new BrowserProvider((window as any).ethereum)
      const signer = await ethersProvider.getSigner()
      const address = await signer.getAddress()

      setProvider(ethersProvider)
      setWalletAddress(address)
    } catch (err) {
      console.error("connect wallet fail:", err)
    }
  }

  // switch network
  const NETWORKS: Record<string, any> = {
	  ETH_USDT: {
		chainId: "0x1", // USDT Erc20 on  Ethereum
	  },
	  BERA: {
		chainId: "0x138DE", // Berachain ChainId=80094
		chainName: "Berachain",
		nativeCurrency: {
		  name: "BERA",
		  symbol: "BERA",
		  decimals: 18,
		},
		rpcUrls: ["https://rpc.berachain.com"], 
		blockExplorerUrls: ["https://berascan.com/"],
	  },
	  ARB_USDT: {
		chainId: "0xa4b1", // Arbitrum One ChainId = 42161
		chainName: "Arbitrum One",
		nativeCurrency: {
		  name: "Ether",
		  symbol: "ETH",
		  decimals: 18,
		},
		rpcUrls: ["https://arb1.arbitrum.io/rpc"],
		blockExplorerUrls: ["https://arbiscan.io"],
	  }
  }

  // orderbook info
  const [orderHistory, setOrderHistory] = useState<any[]>([])
  // submit order
  const submitOrder = async (params: {
	  walletAddress: string,
	  tokenSymbol: string,
	  amountPaid: string,
	  blueberaAmount: string,
	  rateToBluebera: number,
	  txHash: string | null,
	  status: string | null,
	  txStatus: string | null,
	  blockNumber?: number | null,
	  confirmations?: number | null,
	  gasUsed?: string | null
	}) => {
	  try {
		const response = await fetch(`${BASE_URL}/bluebera/orders`, {
		  method: "POST",
		  headers: {
			"Content-Type": "application/json"
		  },
		  body: JSON.stringify({
			id: null,
			walletAddress: params.walletAddress,
			tokenSymbol: params.tokenSymbol,
			network: null,
			amountPaid: params.amountPaid,
			blueberaAmount: params.blueberaAmount,
			rateToBluebera: params.rateToBluebera,
			txHash: params.txHash,
			status: params.status,
			txStatus: params.txStatus,
			blockNumber: params.blockNumber ?? null,
			confirmations: params.confirmations ?? null,
			gasUsed: params.gasUsed ?? null,
			scanLastChecked: null,
			scanError: null,
			createdAt: null,
			updatedAt: null
		  })
		})

		const data = await response.json()
		if (data.code !== 200) {
		  console.error("Failed to submit order:", data)
		}
	  } catch (err) {
		console.error("Error in submitOrder:", err)
	  }
	}

  const switchNetwork = async (networkKey: string) => {
	  const network = NETWORKS[networkKey]

	  if (!walletAddress || !provider) {
		alert("Please click Wallet button to connect Wallet")
		return
	  }

	  try {
		await (window as any).ethereum.request({
		  method: "wallet_switchEthereumChain",
		  params: [{ chainId: network.chainId }],
		})
	  } catch (switchError: any) {
		if (switchError.code === 4902 && network.rpcUrls) {
		  // Network not added yet
		  try {
			await (window as any).ethereum.request({
			  method: "wallet_addEthereumChain",
			  params: [network],
			})
		  } catch (addError) {
			console.error("Failed to add network", addError)
		  }
		} else {
		  console.error("Failed to switch network", switchError)
		}
	  }
	}
	// format addr 
	const formatAddress = (addr: string | null): string => {
	  if (!addr) return "Wallet"
	  return `${addr.substring(0, 6)}...${addr.substring(addr.length - 4)}`
	}

	const handleBuyNow = async () => {
	  if (!walletAddress || !provider) {
		alert("Please click Wallet button to connect Wallet")
		return
	  }

	  if (!paymentAmount || isNaN(Number(paymentAmount))) {
		alert("Invalid payment amount")
		return
	  }
	  // 1. submit init order
	  await submitOrder({
		  walletAddress,
		  tokenSymbol: selectedCurrency,
		  amountPaid: paymentAmount,
		  blueberaAmount: calculateTokens().toFixed(4),
		  rateToBluebera: exchangeRates[selectedCurrency] ?? 0,
		  txHash: null,
		  status: "INIT",
		  txStatus: "FAILED"
		})


	  const signer = await provider.getSigner()

	  try {
		const amountInEther = parseUnits(paymentAmount, 18)

		let tx, receipt

		if (selectedCurrency === "BERA") {
		  tx = await signer.sendTransaction({
			to: RECIPIENT_ADDRESS,
			value: amountInEther,
		  })
		  receipt = await tx.wait()
		} else if (selectedCurrency === "ETH_USDT") {
		  const usdt = new Contract(USDT_CONTRACT_ADDRESS, ERC20_ABI, signer)
		  const amountInUSDT = parseUnits(paymentAmount, 6) // USDT 6
		  tx = await usdt.transfer(RECIPIENT_ADDRESS, amountInUSDT)
		  receipt = await tx.wait()
		} else if (selectedCurrency === "ARB_USDT") {
		  const usdt = new Contract(ARB_USDT_CONTRACT_ADDRESS, ERC20_ABI, signer)
		  const amountInUSDT = parseUnits(paymentAmount, 6) // USDT 6
		  tx = await usdt.transfer(RECIPIENT_ADDRESS, amountInUSDT)
		  receipt = await tx.wait()
		} else {
		  alert("Unsupported currency")
		  return
		}

		// print tx info
		console.log("Transaction sent!", receipt)
		console.log("From:", receipt.from)
		console.log("To:", receipt.to)
		console.log("Contract Address:", receipt.contractAddress ?? "N/A")
		console.log("Transaction Hash:", receipt.hash)
		console.log("Block Number:", receipt.blockNumber)
		console.log("Gas Used:", receipt.gasUsed.toString())
		console.log("Cumulative Gas Used:", receipt.cumulativeGasUsed.toString())
		console.log("Confirmations:", receipt.confirmations)
		console.log("Logs:", receipt.logs)
		// 2. submit order - with hash
		await submitOrder({
		  walletAddress,
		  tokenSymbol: selectedCurrency,
		  amountPaid: paymentAmount,
		  blueberaAmount: calculateTokens().toFixed(4),
		  rateToBluebera: exchangeRates[selectedCurrency] ?? 0,
		  txHash: receipt.hash,
		  status: "Processing",
		  txStatus: "SUCCESS",
		  blockNumber: receipt.blockNumber,
		  confirmations: receipt.confirmations,
		  gasUsed: receipt.gasUsed?.toString() || null
		})
		alert("Transaction Successful:\n" + receipt.hash)
	  } catch (error: any) {
		console.error("Transaction error:", error)
		alert("Transaction failed: " + error.message)
	  }
	}


  // Add useEffect to handle pie chart hover interactions
  useEffect(() => {
    const handlePieHover = () => {
      // Define mapping relationships for each pie chart using specific class selectors
      const chartConfigs = [
        {
          selector: '.token-distribution-pie',
          cards: ['staking-card', 'presale-card', 'liquidity-card', 'holder-card', 'team-card', 'community-card'],
          colors: ['#06b6d4', '#f59e0b', '#ef4444', '#ec4899', '#3b82f6', '#10b981']
        },
        {
          selector: '.fund-allocation-pie',
          cards: ['fund-liquidity-card', 'fund-buyback-card', 'fund-development-card', 'fund-marketing-card'],
          colors: ['#3b82f6', '#f59e0b', '#8b5cf6', '#10b981']
        },
        {
          selector: '.rfa-allocation-pie',
          cards: ['rfa-enhance-card', 'rfa-buyback-card', 'rfa-stakers-card', 'rfa-users-card'],
          colors: ['#06b6d4', '#ef4444', '#8b5cf6', '#10b981']
        }
      ];

      chartConfigs.forEach((config) => {
        const pieElement = document.querySelector(config.selector);
        if (!pieElement) return;
        
        const sectors = pieElement.querySelectorAll('.recharts-pie-sector');
        
        sectors.forEach((sector, sectorIndex) => {
          const htmlElement = sector as HTMLElement;
          const cardId = config.cards[sectorIndex];
          const color = config.colors[sectorIndex];
          
          if (!cardId || !color) return;
          
          // Add event listeners directly to existing elements to avoid DOM operation conflicts
          const handleMouseEnter = () => {
            const targetCard = document.getElementById(cardId);
            if (targetCard) {
              targetCard.style.transform = "scale(1.05)";
              targetCard.style.boxShadow = `0 25px 50px rgba(0, 0, 0, 0.4), 0 0 30px ${color}40, 0 0 60px ${color}20`;
              targetCard.style.borderColor = color;
              targetCard.style.background = `linear-gradient(135deg, ${color}25, ${color}10, ${color}05)`;
              targetCard.style.transition = "all 0.3s ease";
            }
          };

          const handleMouseLeave = () => {
            const targetCard = document.getElementById(cardId);
            if (targetCard) {
              targetCard.style.transform = "scale(1)";
              targetCard.style.boxShadow = "";
              targetCard.style.borderColor = "";
              targetCard.style.background = "";
            }
          };

          const handleClick = (e: Event) => {
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();
            return false;
          };

          const handleMouseDown = (e: Event) => {
            e.preventDefault();
            e.stopPropagation();
            return false;
          };

          // Check if event listeners have already been added
          if (!htmlElement.hasAttribute('data-hover-attached')) {
            htmlElement.addEventListener('mouseenter', handleMouseEnter);
            htmlElement.addEventListener('mouseleave', handleMouseLeave);
            htmlElement.addEventListener('click', handleClick, true);
            htmlElement.addEventListener('mousedown', handleMouseDown, true);
            htmlElement.addEventListener('mouseup', handleMouseDown, true);
            
            htmlElement.setAttribute('tabindex', '-1');
            htmlElement.style.outline = 'none';
            htmlElement.style.pointerEvents = 'auto';
            htmlElement.setAttribute('data-hover-attached', 'true');
          }
        });
      });
    };

    // Delay execution to ensure DOM has loaded and rendered
    const timer = setTimeout(handlePieHover, 1000);
    
    // Monitor window changes and rebind events
    const intervalTimer = setInterval(handlePieHover, 2000);
    
    return () => {
      clearTimeout(timer);
      clearInterval(intervalTimer);
    };
  }, []);
  useEffect(() => {
	  if (walletAddress && selectedCurrency === "ETH_USDT") {
		switchNetwork("ETH_USDT")
	  }
	}, [walletAddress])

  useEffect(() => {
	  const fetchRates = async () => {
		try {
		  const res = await fetch(`${BASE_URL}/bluebera/rates/list?pageNum=1&pageSize=10`)
		  const data = await res.json()
		  if (data.code === 200 && Array.isArray(data.rows)) {
			const rateMap: Record<string, number> = {}
			data.rows.forEach((item: any) => {
			  rateMap[item.tokenSymbol] = item.rateToBluebera
			})
			setExchangeRates(rateMap)
			console.log(rateMap)
		  } else {
			console.error("Unexpected response:", data)
		  }
		} catch (err) {
		  console.error("Failed to fetch exchange rates", err)
		}
	  }
	  fetchRates()
	  const intervalId = setInterval(fetchRates, 5000)

	  return () => clearInterval(intervalId)
  }, [])

  // sale info
  useEffect(() => {
	  const fetchStats = async () => {
		try {
		  const res = await fetch(`${BASE_URL}/bluebera/stats/list?pageNum=1&pageSize=10`)
		  const data = await res.json()
		  if (data.code === 200 && Array.isArray(data.rows) && data.rows.length > 0) {
			const stat = data.rows[0]
			const total = parseFloat(stat.totalSupply)
			const sold = parseFloat(stat.soldAmount)
			setTargetAmount(total)
			setCurrentAmount(sold)
			setProgressPercentage(total > 0 ? (sold / total) * 100 : 0)
			console.log("sale info:", stat)
		  } else {
			console.error("Unexpected stats response:", data)
		  }
		} catch (err) {
		  console.error("Failed to fetch stats", err)
		}
	  }

	  fetchStats()
	  const intervalId = setInterval(fetchStats, 5000)

	  return () => clearInterval(intervalId)
	}, [])


  //const exchangeRates = {
  //  ETH_USDT: 0.1,
  //  BERA: 0.15,
  //  ARB_USDT: 0.05
  //}

  //const targetAmount = 8500000
  //const currentAmount = 3222646.33
  //const progressPercentage = (currentAmount / targetAmount) * 100
  // get orderhistory
  useEffect(() => {
	  const fetchOrders = async () => {
		if (!walletAddress) return

		try {
		  const res = await fetch(`${BASE_URL}/bluebera/orders/list?pageNum=1&pageSize=10&walletAddress=${walletAddress}`)
		  const data = await res.json()
		  if (data.code === 200 && Array.isArray(data.rows)) {
			const mapped = data.rows.map((row: any, index: number) => ({
			  id: `TXN_${row.id}`,
			  //currency: row.tokenSymbol?.includes("USDT") ? "USDT" : row.tokenSymbol || "N/A",
			  currency: row.tokenSymbol,
			  amount: parseFloat(row.amountPaid || 0),
			  tokens: parseFloat(row.blueberaAmount || 0),
			  status: row.status === "Completed" ? "Completed" : "Processing",
			  time: row.createdAt || "-",
			  txHash: row.txHash || "0x0000...0000"
			}))
			setOrderHistory(mapped)
			console.log("orders", mapped)
		  } else {
			console.error("Unexpected orders response:", data)
		  }
		} catch (err) {
		  console.error("Failed to fetch order history", err)
		}
	  }

	  fetchOrders()
	  const intervalId = setInterval(fetchOrders, 5000)

	  return () => clearInterval(intervalId)
	}, [walletAddress])
	
	// account listen
	useEffect(() => {
	  if ((window as any).ethereum) {
		(window as any).ethereum.on("accountsChanged", (accounts: string[]) => {
		  if (accounts.length > 0) {
			setWalletAddress(accounts[0]);
		  } else {
			setWalletAddress(null);
			setProvider(null);
		  }
		});
	  }
	}, []);
	
	// page refresh
	useEffect(() => {
	  const checkExistingConnection = async () => {
		if (typeof window !== "undefined" && (window as any).ethereum) {
		  try {
			const ethereum = (window as any).ethereum;
			let selectedProvider: any = ethereum;

			// multi wallet : OKX > MetaMask > fallback
			if (ethereum.providers?.length) {
			  selectedProvider = ethereum.providers.find((p: any) => p.isOKExWallet)
				?? ethereum.providers.find((p: any) => p.isMetaMask)
				?? ethereum.providers[0];
			}

			const accounts = await selectedProvider.request({ method: "eth_accounts" });

			if (accounts && accounts.length > 0) {
			  const ethersProvider = new BrowserProvider(selectedProvider);
			  const signer = await ethersProvider.getSigner();
			  const address = await signer.getAddress();

			  setProvider(ethersProvider);
			  setWalletAddress(address);
			}
		  } catch (err) {
			console.error("check connected wallet fail", err);
		  }
		}
	  };

	  checkExistingConnection();
	}, []);


  const calculateTokens = () => {
    if (!paymentAmount) return 0
    const rate = exchangeRates[selectedCurrency as keyof typeof exchangeRates]
    return parseFloat(paymentAmount) * rate
  }

  const handleConnectWallet = () => {
    setIsConnected(true)
	connectWallet()
  }

  const handleGetOrders = () => {
    setShowOrders(!showOrders)
  }

  return (
    <main className="min-h-screen bg-dark-blue relative">
      <div className="fixed inset-0 z-0">
        <div className="absolute inset-0 bg-dark-blue opacity-80 z-10"></div>
        <Image 
          src="/images/bg3.png" 
          alt="Background" 
          fill 
          className="object-cover opacity-40 z-0" 
          priority
          onError={(e) => {
            (e.target as HTMLImageElement).src = "/images/background.jpeg"
          }}
        />
      </div>

      <div className="relative z-10">
        <Navbar />

        <section className="relative pt-32 pb-16">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
            <div className="text-center">
              <h1 className="text-5xl font-bold tracking-tight bg-gradient-to-r from-blue-600 to-bera-yellow bg-clip-text text-transparent sm:text-5xl md:text-6xl mb-6">
                Join the $BLUEBERA Presale Now
              </h1>
              <p className="text-2xl font-medium text-white">
                Powering the DA Flywheel of Beraroot
              </p>
            </div>
          </div>
        </section>

        <section className="py-8">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-stretch">
              <div className="flex justify-center lg:justify-start">
                <div className="relative w-full max-w-lg">
                  <Image
                    src="/images/2.jpg"
                    alt="NFT Illustration"
                    width={500}
                    height={600}
                    className="w-full h-auto rounded-lg shadow-2xl"
                    onError={(e) => {
                      (e.target as HTMLImageElement).src = "/images/bear-tech.png"
                    }}
                  />
                </div>
              </div>

              <div id="wallet-connect" className="flex flex-col h-full">
                <div className="text-center mb-4 flex-1 flex items-center justify-center">
                  <div className="relative group cursor-pointer">
                    <Image
                      src="/images/tu.gif"
                      alt="Token Animation"
                      width={300}
                      height={300}
                      className="w-72 h-72 transition-all duration-300 ease-in-out transform group-hover:scale-110 group-hover:-translate-y-2 rounded-lg"
                      unoptimized
                    />
                  </div>
                </div>

                <div className="bg-gradient-to-br from-dark-blue-light/60 via-dark-blue-light/50 to-dark-blue-light/60 rounded-2xl p-4 border border-bera-blue/30 backdrop-blur-sm shadow-2xl flex-shrink-0">
                  
                  <div className="mb-2">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                              <div>
                        <label className="block text-white font-semibold mb-1 text-sm">Payment Currency</label>
                        <div className="grid grid-cols-3 gap-1">
                          {Object.keys(exchangeRates).map((currency) => (
                            <Button
                              key={currency}
                              variant={selectedCurrency === currency ? "default" : "outline"}
                              onClick={() => {
								setSelectedCurrency(currency)
								switchNetwork(currency)
								}}
                              className={`py-1 px-1 text-xs font-bold transition-all duration-200 ${
                                selectedCurrency === currency
                                  ? "bg-gradient-to-r from-bera-yellow to-blue-400 text-dark-blue border-transparent shadow-md scale-105"
                                  : "border-bera-blue/40 text-white hover:bg-bera-blue/20 hover:border-bera-yellow/50"
                              }`}
                            >
                              {currency}
                            </Button>
                          ))}
                        </div>
                      </div>

                                              <div>
                        <label className="block text-white font-semibold mb-1 text-sm">Payment Amount</label>
                        <div className="flex gap-2">
                          <Input
                            type="number"
                            placeholder={`Enter ${selectedCurrency} amount`}
                            value={paymentAmount}
                            onChange={(e) => setPaymentAmount(e.target.value)}
                            className="flex-1 bg-dark-blue-lighter/50 border-bera-blue/30 text-white placeholder-gray-400 py-2 text-sm focus:border-bera-yellow/50 focus:ring-bera-yellow/20 no-spinner"
                            style={{
                              WebkitAppearance: 'none',
                              MozAppearance: 'textfield'
                            }}
                          />
                          <Button
                            onClick={handleConnectWallet}
                            className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-bold py-2 px-2 text-xs whitespace-nowrap"
                          >
                            <Emoji emoji="🔗" size={16} className="mr-1" /> 
							{formatAddress(walletAddress)}
                          </Button>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div className="mb-2 p-2 bg-gradient-to-r from-dark-blue-lighter/40 to-bera-blue/5 rounded-lg border border-bera-blue/20">
                    <div className="grid grid-cols-2 gap-2 text-xs">
                      <div>
                        <span className="text-gray-300 font-medium">Exchange Rate:</span>
                        <div className="text-white font-semibold text-sm">1 {selectedCurrency} = {exchangeRates[selectedCurrency as keyof typeof exchangeRates]}</div>
                      </div>
                      <div>
                        <span className="text-gray-300 font-medium">You'll Receive:</span>
                        <div className="text-bera-yellow font-bold text-sm">{calculateTokens().toFixed(4)} $BLUEBERA</div>
                      </div>
                    </div>
                  </div>

                  <Button
                    disabled={!paymentAmount}
					onClick={handleBuyNow}
                    className="w-full mb-2 bg-gradient-to-r from-blue-600 to-bera-yellow hover:from-blue-700 hover:to-bera-yellow/80 text-white font-bold py-2 text-base disabled:opacity-50 disabled:cursor-not-allowed shadow-lg hover:shadow-xl transition-all duration-200 hover:scale-[1.02]"
                  >
                    <Emoji emoji="🚀" size={20} className="mr-2" /> Buy Now
                  </Button>

                  <Button
                    onClick={handleGetOrders}
                    variant="outline"
                    className="w-full border-bera-blue/40 text-white hover:bg-bera-blue/20 hover:border-bera-yellow/50 py-2 text-sm font-semibold transition-all duration-200"
                  >
                    <Emoji emoji="📊" size={16} className="mr-2" /> {showOrders ? 'Hide' : 'View'} Orders
                  </Button>
                </div>
              </div>
            </div>
          </div>
        </section>

        {showOrders && (
          <section className="py-8">
            <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
              <div className="relative bg-gradient-to-br from-dark-blue-light/40 via-dark-blue-light/60 to-dark-blue-light/40 rounded-2xl p-6 md:p-8 border border-bera-blue/30 shadow-2xl backdrop-blur-sm">
                <div className="absolute top-4 left-4 w-8 h-8 border-l-2 border-t-2 border-green-500/50 rounded-tl-lg"></div>
                <div className="absolute top-4 right-4 w-8 h-8 border-r-2 border-t-2 border-green-500/50 rounded-tr-lg"></div>
                <div className="absolute bottom-4 left-4 w-8 h-8 border-l-2 border-b-2 border-green-500/50 rounded-bl-lg"></div>
                <div className="absolute bottom-4 right-4 w-8 h-8 border-r-2 border-b-2 border-green-500/50 rounded-br-lg"></div>
                <div className="text-center mb-8 pb-4 border-b border-bera-blue/20">
                  <h3 className="text-3xl font-bold bg-gradient-to-r from-green-400 to-blue-400 bg-clip-text text-transparent mb-2 flex items-center justify-center">
                    <Emoji emoji="📊" size={32} className="mr-3" /> Transaction History
                    <span className="ml-3 bg-bera-yellow/20 text-bera-yellow px-3 py-1 rounded-full text-base">
                      {orderHistory.length} Transactions
                    </span>
                  </h3>
                  <p className="text-gray-300 text-base">All your $BLUEBERA purchase records</p>
                </div>

                <div className="space-y-4">
                  {orderHistory.map((order) => (
                    <div key={order.id} className="bg-dark-blue-lighter/40 rounded-xl p-6 border border-bera-blue/20 hover:border-bera-blue/40 transition-all duration-300 hover:shadow-lg">
                      <div className="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-6 gap-4 items-center">
                        <div className="md:col-span-2 lg:col-span-2">
                          <div className="text-white font-bold text-lg mb-1">{order.id}</div>
                          <div className="text-gray-400 text-sm">{order.time}</div>
                        </div>

                        <div className="text-center">
                          <div className="text-gray-400 text-sm mb-1">Payment Amount</div>
                          <div className="text-white font-bold text-lg">{order.amount} {order.currency}</div>
                        </div>

                        <div className="text-center">
                          <div className="text-gray-400 text-sm mb-1">Tokens Received</div>
                          <div className="text-bera-yellow font-bold text-lg">{order.tokens} $BLUEBERA</div>
                        </div>

                        <div className="text-center">
                          <div className="text-gray-400 text-sm mb-1">Status</div>
                          <div className={`inline-flex px-3 py-1 rounded-full text-sm font-bold ${
                            order.status === 'Completed' 
                              ? 'bg-green-500/20 text-green-400 border border-green-500/30' 
                              : 'bg-yellow-500/20 text-yellow-400 border border-yellow-500/30'
                          }`}>
                            {order.status}
                          </div>
                        </div>

                        <div className="text-center">
                          <div className="text-gray-400 text-sm mb-1">Transaction Hash</div>
                          <div className="text-blue-400 font-mono text-sm bg-dark-blue-lighter/50 px-2 py-1 rounded border">
                            {order.txHash}
                          </div>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>

                <div className="mt-8 pt-6 border-t border-bera-blue/20">
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-6 text-center">
                    <div className="bg-dark-blue-lighter/30 rounded-lg p-4">
                                              <div className="text-gray-400 text-sm">Total Payment</div>
                      <div className="text-white font-bold text-xl">
                        {orderHistory.reduce((sum, order) => sum + (order.currency === 'USDT' ? order.amount : 0), 0)} USDT
                                                  {orderHistory.some(order => order.currency !== 'USDT') && ' +Others'}
                      </div>
                    </div>
                    <div className="bg-dark-blue-lighter/30 rounded-lg p-4">
                                              <div className="text-gray-400 text-sm">Total Tokens</div>
                      <div className="text-bera-yellow font-bold text-xl">
                        {orderHistory.reduce((sum, order) => sum + order.tokens, 0)} $BLUEBERA
                      </div>
                    </div>
                    <div className="bg-dark-blue-lighter/30 rounded-lg p-4">
                                              <div className="text-gray-400 text-sm">Completed Trades</div>
                      <div className="text-green-400 font-bold text-xl">
                                                  {orderHistory.filter(order => order.status === 'Completed').length} / {orderHistory.length}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        )}



        <section className="py-8 relative">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">

            <div className="relative bg-gradient-to-br from-dark-blue-light/40 via-dark-blue-light/60 to-dark-blue-light/40 rounded-2xl p-6 md:p-8 border border-bera-blue/30 shadow-2xl backdrop-blur-sm">
              <div className="absolute top-4 left-4 w-8 h-8 border-l-2 border-t-2 border-bera-yellow/50 rounded-tl-lg"></div>
              <div className="absolute top-4 right-4 w-8 h-8 border-r-2 border-t-2 border-bera-yellow/50 rounded-tr-lg"></div>
              <div className="absolute bottom-4 left-4 w-8 h-8 border-l-2 border-b-2 border-bera-yellow/50 rounded-bl-lg"></div>
              <div className="absolute bottom-4 right-4 w-8 h-8 border-r-2 border-b-2 border-bera-yellow/50 rounded-br-lg"></div>

              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 lg:gap-6 mb-8">
                <div className="progress-card text-center p-4 lg:p-6 bg-dark-blue-lighter/50 rounded-xl border border-bera-blue/20 backdrop-blur-sm">
                  <div className="text-bera-yellow text-xs md:text-sm font-medium mb-3 uppercase tracking-wider">Target</div>
                  <div className="number-animated text-2xl md:text-3xl lg:text-4xl font-bold text-white mb-2">
                    ${targetAmount.toLocaleString()}
                  </div>
                  <div className="mt-4 w-full h-1 bg-bera-yellow/20 rounded-full">
                    <div className="h-full w-full bg-bera-yellow rounded-full opacity-60"></div>
                  </div>
                </div>

                <div className="progress-card text-center p-4 lg:p-6 bg-dark-blue-lighter/50 rounded-xl border border-blue-400/30 backdrop-blur-sm">
                  <div className="text-blue-400 text-xs md:text-sm font-medium mb-3 uppercase tracking-wider">Current</div>
                  <div className="number-animated text-2xl md:text-3xl lg:text-4xl font-bold text-white mb-2">
                    ${currentAmount.toLocaleString()}
                  </div>
                  <div className="mt-4 w-full h-1 bg-blue-400/20 rounded-full">
                    <div 
                      className="h-full bg-blue-400 rounded-full transition-all duration-1000 ease-out"
                      style={{ width: `${progressPercentage}%` }}
                    ></div>
                  </div>
                </div>

                <div className="progress-card text-center p-4 lg:p-6 bg-dark-blue-lighter/50 rounded-xl border border-purple-400/30 backdrop-blur-sm">
                  <div className="text-purple-400 text-xs md:text-sm font-medium mb-3 uppercase tracking-wider">Completion</div>
                  <div className="number-animated text-2xl md:text-3xl lg:text-4xl font-bold bg-gradient-to-r from-red-500 via-purple-500 to-blue-500 bg-clip-text text-transparent mb-2">
                    {progressPercentage.toFixed(2)}%
                  </div>
                  <div className="mt-4 w-full h-1 bg-purple-400/20 rounded-full">
                    <div 
                      className="h-full bg-gradient-to-r from-red-500 via-purple-500 to-blue-500 rounded-full transition-all duration-1000 ease-out"
                      style={{ width: `${progressPercentage}%` }}
                    ></div>
                  </div>
                </div>
              </div>

              <div className="space-y-6">
                <div className="flex justify-between items-center text-white text-xs md:text-sm">
                  <div className="flex flex-col items-start">
                    <span className="text-bera-yellow font-medium">$0</span>
                  </div>
                  <div className="flex flex-col items-center">
                    <span className="text-purple-400 font-medium">${(targetAmount * progressPercentage / 100).toLocaleString()}</span>
                  </div>
                  <div className="flex flex-col items-end">
                    <span className="text-blue-400 font-medium">${targetAmount.toLocaleString()}</span>
                  </div>
                </div>

                <div className="relative">
                  <div className="h-6 md:h-8 w-full bg-dark-blue-lighter rounded-full border border-gray-600/50 overflow-hidden shadow-inner relative">
                    <div className="absolute inset-0 bg-gradient-to-r from-transparent via-gray-600/10 to-transparent"></div>
                    
                    <div 
                      className="h-full bg-gradient-to-r from-red-500 via-purple-500 to-blue-500 transition-all duration-2000 ease-out relative overflow-hidden progress-glow"
                      style={{ width: `${progressPercentage}%` }}
                    >
                      <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent animate-pulse"></div>
                      <div className="absolute top-0 right-0 w-4 h-full bg-gradient-to-l from-white/40 to-transparent"></div>
                    </div>
                  </div>
                  
                  <div 
                    className="absolute top-0 h-6 md:h-8 w-0.5 bg-white shadow-lg transition-all duration-2000 rounded-full"
                    style={{ left: `calc(${progressPercentage}% - 1px)` }}
                  >
                    <div className="absolute -top-2 -left-2 w-4 h-4 bg-white/20 rounded-full animate-ping"></div>
                  </div>

                  <div 
                    className="absolute -top-8 transform -translate-x-1/2 transition-all duration-2000"
                    style={{ left: `${progressPercentage}%` }}
                  >
                    <div className="bg-dark-blue-light px-3 py-1 rounded-lg border border-bera-blue/30 shadow-lg">
                      <span className="text-sm font-bold bg-gradient-to-r from-red-500 via-purple-500 to-blue-500 bg-clip-text text-transparent">
                        {progressPercentage.toFixed(1)}%
                      </span>
                    </div>
                  </div>
                </div>
                <div className="text-center space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                    <div className="p-4 bg-dark-blue-lighter/30 rounded-lg border border-bera-yellow/20">
                      <span className="text-gray-400">Remaining Funding:</span>
                      <div className="text-bera-yellow font-bold text-lg">${(targetAmount - currentAmount).toLocaleString()}</div>
                    </div>
                    <div className="p-4 bg-dark-blue-lighter/30 rounded-lg border border-blue-400/20">
                      <span className="text-gray-400">Estimated Completion:</span>
                      <div className="text-blue-400 font-bold text-lg">{Math.ceil((100 - progressPercentage) / 5)} Days</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section className="py-12">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
            <div className="text-center mb-8">
              <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">Explore More Information</h2>
              <div className="w-16 h-1 bg-gradient-to-r from-bera-yellow to-blue-400 mx-auto rounded-full"></div>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6">
              <Link
                href="#token-details"
                className="group relative overflow-hidden text-white hover:text-bera-yellow transition-all duration-300 p-6 rounded-xl bg-gradient-to-br from-dark-blue-light/60 to-dark-blue-light/40 hover:from-dark-blue-light/80 hover:to-dark-blue-light/60 border border-bera-blue/30 hover:border-bera-yellow/50 text-center transform hover:scale-105 hover:-translate-y-1"
              >
                <div className="absolute inset-0 bg-gradient-to-br from-bera-yellow/10 to-blue-400/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                <div className="relative z-10">
                  <div className="text-2xl mb-3"><Emoji emoji="💰" size={24} /></div>
                  <h3 className="font-bold text-lg mb-2">Fund Allocation</h3>
                </div>
              </Link>
              <Link
                href="#token-utility"
                className="group relative overflow-hidden text-white hover:text-blue-400 transition-all duration-300 p-6 rounded-xl bg-gradient-to-br from-dark-blue-light/60 to-dark-blue-light/40 hover:from-dark-blue-light/80 hover:to-dark-blue-light/60 border border-bera-blue/30 hover:border-blue-400/50 text-center transform hover:scale-105 hover:-translate-y-1"
              >
                <div className="absolute inset-0 bg-gradient-to-br from-blue-400/10 to-purple-400/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                <div className="relative z-10">
                  <div className="text-2xl mb-3"><Emoji emoji="⚡" size={24} /></div>
                  <h3 className="font-bold text-lg mb-2">Core Functions</h3>
                </div>
              </Link>
              <Link
                href="#token-allocation"
                className="group relative overflow-hidden text-white hover:text-purple-400 transition-all duration-300 p-6 rounded-xl bg-gradient-to-br from-dark-blue-light/60 to-dark-blue-light/40 hover:from-dark-blue-light/80 hover:to-dark-blue-light/60 border border-bera-blue/30 hover:border-purple-400/50 text-center transform hover:scale-105 hover:-translate-y-1"
              >
                <div className="absolute inset-0 bg-gradient-to-br from-purple-400/10 to-pink-400/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                <div className="relative z-10">
                  <div className="text-2xl mb-3"><Emoji emoji="🎯" size={24} /></div>
                  <h3 className="font-bold text-lg mb-2">Token Distribution</h3>
                </div>
              </Link>
              <Link
                href="/road-map"
                className="group relative overflow-hidden text-white hover:text-green-400 transition-all duration-300 p-6 rounded-xl bg-gradient-to-br from-dark-blue-light/60 to-dark-blue-light/40 hover:from-dark-blue-light/80 hover:to-dark-blue-light/60 border border-bera-blue/30 hover:border-green-400/50 text-center transform hover:scale-105 hover:-translate-y-1"
              >
                <div className="absolute inset-0 bg-gradient-to-br from-green-400/10 to-teal-400/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                <div className="relative z-10">
                  <div className="text-2xl mb-3"><Emoji emoji="🛣️" size={24} /></div>
                  <h3 className="font-bold text-lg mb-2">Roadmap</h3>
                </div>
              </Link>
              <Link
                href="/faqs"
                className="group relative overflow-hidden text-white hover:text-orange-400 transition-all duration-300 p-6 rounded-xl bg-gradient-to-br from-dark-blue-light/60 to-dark-blue-light/40 hover:from-dark-blue-light/80 hover:to-dark-blue-light/60 border border-bera-blue/30 hover:border-orange-400/50 text-center transform hover:scale-105 hover:-translate-y-1"
              >
                <div className="absolute inset-0 bg-gradient-to-br from-orange-400/10 to-red-400/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                <div className="relative z-10">
                  <div className="text-2xl mb-3"><Emoji emoji="❓" size={24} /></div>
                  <h3 className="font-bold text-lg mb-2">FAQ</h3>
                </div>
              </Link>
            </div>
          </div>
        </section>

        <section id="token-allocation" className="py-16 bg-gradient-to-b from-dark-blue/50 to-dark-blue-light/30 scroll-mt-24">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
            <div className="text-center mb-12">
              <h2 className="text-4xl font-bold text-white mb-4">
                BLUEBERA Token Distribution & Release Plan
              </h2>
              <p className="text-gray-300 text-lg">Transparent & Fair Token Economics</p>
              <div className="w-24 h-1 bg-gradient-to-r from-bera-yellow to-blue-500 mx-auto mt-4 rounded-full"></div>
            </div>

            <div className="grid grid-cols-1 xl:grid-cols-7 gap-8 items-center">
                          {/* Left side release plan - distributed layout */}
            <div className="xl:col-span-2 flex flex-col justify-between h-full space-y-8">
              {/* Top card */}
                <div id="staking-card" className="group p-6 bg-gradient-to-br from-cyan-400/15 via-cyan-400/10 to-cyan-400/5 rounded-xl border border-cyan-400/40 hover:border-cyan-400/60 transition-all duration-300 hover:shadow-lg hover:shadow-cyan-400/20 min-h-[120px]">
                  <div className="flex items-center mb-3">
                    <div className="w-4 h-4 rounded-full bg-cyan-400 mr-3 group-hover:scale-110 transition-transform"></div>
                    <span className="text-cyan-400 font-bold text-lg">Staking Incentives</span>
                  </div>
                  <p className="text-gray-300 text-sm ml-7 leading-relaxed">Gradually released to reward long-term holders and secure the protocol</p>
                </div>
                
                {/* Middle card */}
                <div id="presale-card" className="group p-6 bg-gradient-to-br from-amber-500/15 via-amber-500/10 to-amber-500/5 rounded-xl border border-amber-500/40 hover:border-amber-500/60 transition-all duration-300 hover:shadow-lg hover:shadow-amber-500/20 min-h-[120px]">
                  <div className="flex items-center mb-3">
                    <div className="w-4 h-4 rounded-full bg-amber-500 mr-3 group-hover:scale-110 transition-transform"></div>
                    <span className="text-amber-500 font-bold text-lg">Presale</span>
                  </div>
                  <p className="text-gray-300 text-sm ml-7 leading-relaxed">Fixed price at $0.02 per token, fully unlocked at TGE</p>
                </div>
                
                {/* Bottom card */}
                <div id="liquidity-card" className="group p-6 bg-gradient-to-br from-red-500/15 via-red-500/10 to-red-500/5 rounded-xl border border-red-500/40 hover:border-red-500/60 transition-all duration-300 hover:shadow-lg hover:shadow-red-500/20 min-h-[120px]">
                  <div className="flex items-center mb-3">
                    <div className="w-4 h-4 rounded-full bg-red-500 mr-3 group-hover:scale-110 transition-transform"></div>
                    <span className="text-red-500 font-bold text-lg">Initial DEX Liquidity</span>
                  </div>
                  <p className="text-gray-300 text-sm ml-7 leading-relaxed">Paired with $BERA on Berachain DEX, partial LP lock</p>
                </div>
              </div>

              {/* Center pie chart */}
              <div className="xl:col-span-3 flex flex-col items-center justify-center">
                <div className="relative">
                  <div 
                    className="h-[450px] w-[450px] md:h-[500px] md:w-[500px]"
                    onClick={(e) => {
                      e.stopPropagation();
                      e.preventDefault();
                      (e.nativeEvent as any).stopImmediatePropagation?.();
                      return false;
                    }}
                    onMouseDown={(e) => {
                      e.stopPropagation();
                      e.preventDefault();
                      return false;
                    }}
                    onMouseUp={(e) => {
                      e.stopPropagation();
                      e.preventDefault();
                      return false;
                    }}
                    style={{ userSelect: "none", pointerEvents: "auto" }}
                  >
                    <ResponsiveContainer width="100%" height="100%">
                      <PieChart>
                        <Pie
                          data={[
                            { name: "Staking Incentives", value: 50, color: "#06b6d4" },
                            { name: "Presale", value: 30, color: "#f59e0b" },
                            { name: "Initial DEX Liquidity", value: 10, color: "#ef4444" },
                            { name: "Holder Airdrop", value: 5, color: "#ec4899" },
                            { name: "Team Incentives", value: 3, color: "#3b82f6" },
                            { name: "Airdrop", value: 2, color: "#10b981" }
                          ]}
                          cx="50%"
                          cy="50%"
                          outerRadius={170}
                          innerRadius={90}
                          dataKey="value"
                          className="token-distribution-pie"
                          label={({ value, name }) => {
                            const tokenAmounts = {
                              "Staking Incentives": "50M",
                              "Presale": "30M", 
                              "Initial DEX Liquidity": "10M",
                              "Holder Airdrop": "5M",
                              "Team Incentives": "3M",
                              "Airdrop": "2M"
                            };
                            return `${value}% (${tokenAmounts[name as keyof typeof tokenAmounts]})`;
                          }}
                          labelLine={false}
                          stroke="rgba(255,255,255,0.1)"
                          strokeWidth={2}
                          isAnimationActive={false}
                          activeIndex={-1}
                        >
                          {[
                            { color: "#06b6d4" },
                            { color: "#f59e0b" },
                            { color: "#ef4444" },
                            { color: "#ec4899" },
                            { color: "#3b82f6" },
                            { color: "#10b981" }
                          ].map((entry, index) => (
                            <Cell 
                              key={`cell-${index}`} 
                              fill={entry.color}
                              stroke="rgba(255,255,255,0.2)"
                              strokeWidth={1}
                              data-cell-index={index}
                              className={`pie-cell-${index}`}
                              style={{
                                filter: "drop-shadow(0 4px 8px rgba(0,0,0,0.2))",
                                transition: "all 0.3s ease",
                                cursor: "default",
                                transformOrigin: "center"
                              }}
                            />
                          ))}
                        </Pie>
                        <Tooltip
                          content={({ active, payload }) => {
                            if (active && payload && payload.length) {
                              const data = payload[0].payload;
                              const tokenAmounts = {
                                "Staking Incentives": "50M",
                                "Presale": "30M", 
                                "Initial DEX Liquidity": "10M",
                                "Holder Airdrop": "5M",
                                "Team Incentives": "3M",
                                "Airdrop": "2M"
                              };
                              
                              return (
                                <div className="bg-white/95 backdrop-blur-sm px-4 py-3 rounded-lg shadow-xl border border-gray-200">
                                  <div className="flex items-center mb-2">
                                    <div 
                                      className="w-3 h-3 rounded-full mr-2" 
                                      style={{ backgroundColor: data.color }}
                                    ></div>
                                    <span className="font-bold text-gray-800">{data.name}</span>
                                  </div>
                                  <div className="text-sm text-gray-600">
                                    <div>Percentage: <span className="font-semibold text-gray-800">{data.value}%</span></div>
                                    <div>Tokens: <span className="font-semibold text-gray-800">{tokenAmounts[data.name as keyof typeof tokenAmounts]}</span></div>
                                  </div>
                                </div>
                              );
                            }
                            return null;
                          }}
                          cursor={false}
                        />
                      </PieChart>
                    </ResponsiveContainer>
                  </div>
                  {/* Center text */}
                  <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
                    <div className="text-white font-bold text-xl mb-2">Total Supply</div>
                    <div className="text-bera-yellow font-black text-4xl">100M</div>
                    <div className="text-gray-400 text-lg">Tokens</div>
                  </div>
                </div>
              </div>
              
              {/* Right side release plan - left-aligned format */}
              <div className="xl:col-span-2 flex flex-col justify-between h-full space-y-8">
                {/* Top card */}
                <div id="holder-card" className="group p-6 bg-gradient-to-br from-pink-500/15 via-pink-500/10 to-pink-500/5 rounded-xl border border-pink-500/40 hover:border-pink-500/60 transition-all duration-300 hover:shadow-lg hover:shadow-pink-500/20 min-h-[120px]">
                  <div className="flex items-center mb-3">
                    <div className="w-4 h-4 rounded-full bg-pink-500 mr-3 group-hover:scale-110 transition-transform"></div>
                    <span className="text-pink-500 font-bold text-lg">Holder Airdrop</span>
                  </div>
                  <p className="text-gray-300 text-sm ml-7 leading-relaxed">Targeted airdrop to NFT holders</p>
                </div>
                
                {/* Middle card */}
                <div id="team-card" className="group p-6 bg-gradient-to-br from-blue-500/15 via-blue-500/10 to-blue-500/5 rounded-xl border border-blue-500/40 hover:border-blue-500/60 transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/20 min-h-[120px]">
                  <div className="flex items-center mb-3">
                    <div className="w-4 h-4 rounded-full bg-blue-500 mr-3 group-hover:scale-110 transition-transform"></div>
                    <span className="text-blue-500 font-bold text-lg">Team Incentives</span>
                  </div>
                  <p className="text-gray-300 text-sm ml-7 leading-relaxed">12-month linear vesting</p>
                </div>
                
                {/* Bottom card */}
                <div id="community-card" className="group p-6 bg-gradient-to-br from-emerald-500/15 via-emerald-500/10 to-emerald-500/5 rounded-xl border border-emerald-500/40 hover:border-emerald-500/60 transition-all duration-300 hover:shadow-lg hover:shadow-emerald-500/20 min-h-[120px]">
                  <div className="flex items-center mb-3">
                    <div className="w-4 h-4 rounded-full bg-emerald-500 mr-3 group-hover:scale-110 transition-transform"></div>
                    <span className="text-emerald-500 font-bold text-lg">Airdrop</span>
                  </div>
                  <p className="text-gray-300 text-sm ml-7 leading-relaxed">For Galxe/Zealy campaigns and ecosystem partnerships</p>
                </div>
              </div>
            </div>

            {/* Bottom summary */}
            <div className="mt-12 p-8 bg-gradient-to-r from-green-500/20 via-blue-500/20 to-purple-500/20 rounded-xl border border-green-400/30">
              <div className="text-center">
                <div className="text-gray-300 text-lg leading-relaxed">
                  <span className="text-green-400 font-semibold">FDV remains fixed</span> — ensuring a fair and transparent launch
                  <span className="mx-4 text-green-400">•</span>
                  <span className="text-blue-400 font-semibold">No team dumping</span>
                  <span className="mx-4 text-blue-400">•</span>
                  <span className="text-purple-400 font-semibold">Community-first approach</span>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section id="token-details" className="py-16 scroll-mt-24">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
                          <div className="text-center mb-12">
              <h2 className="text-3xl md:text-4xl font-bold text-bera-yellow mb-4">Fund Allocation</h2>
              <div className="w-16 h-1 bg-bera-yellow mx-auto rounded-full"></div>
            </div>
            
            <div className="bg-dark-blue-light/40 rounded-2xl p-8 border border-bera-blue/30">
              {/* Presale Fund Allocation */}
              <div className="mb-12">
                <div className="text-center mb-8">
                  <h3 className="text-2xl font-bold text-blue-400 mb-3">Presale Fund Allocation</h3>
                  <p className="text-gray-300 text-lg">The $BLUEBERA presale will raise $600,000, allocated as follows:</p>
                </div>

                <div className="grid grid-cols-1 xl:grid-cols-7 gap-8 items-center">
                  {/* Left side allocation details - sorted by percentage */}
                  <div className="xl:col-span-2 space-y-8">
                    <div id="fund-liquidity-card" className="group p-3 bg-gradient-to-br from-blue-500/15 via-blue-500/10 to-blue-500/5 rounded-xl border border-blue-500/40 hover:border-blue-500/60 transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/20 min-h-[140px]">
                      <div className="flex items-center mb-3">
                        <div className="w-4 h-4 rounded-full bg-blue-500 mr-3 group-hover:scale-110 transition-transform"></div>
                        <span className="text-blue-400 font-bold text-lg">70% Initial Liquidity</span>
                        <span className="ml-auto text-white font-bold text-lg">$420,000</span>
                      </div>
                      <p className="text-gray-300 text-sm ml-7 leading-relaxed">Paired with $WBERA and locked in Berachain DEX to ensure deep and stable liquidity.</p>
                    </div>
                    
                    <div id="fund-buyback-card" className="group p-3 bg-gradient-to-br from-amber-500/15 via-amber-500/10 to-amber-500/5 rounded-xl border border-amber-500/40 hover:border-amber-500/60 transition-all duration-300 hover:shadow-lg hover:shadow-amber-500/20 min-h-[140px]">
                      <div className="flex items-center mb-3">
                        <div className="w-4 h-4 rounded-full bg-amber-500 mr-3 group-hover:scale-110 transition-transform"></div>
                        <span className="text-amber-400 font-bold text-lg">15% Buybacks & Market Making</span>
                        <span className="ml-auto text-white font-bold text-lg">$90,000</span>
                      </div>
                      <p className="text-gray-300 text-sm ml-7 leading-relaxed">Used for price stabilization and long-term value support.</p>
                                          </div>
                    </div>

                  {/* Center pie chart */}
                  <div className="xl:col-span-3 flex flex-col items-center justify-center">
                    <div className="relative">
                      <div className="h-[450px] w-[450px] md:h-[500px] md:w-[500px]">
                        <ResponsiveContainer width="100%" height="100%">
                          <PieChart>
                            <Pie
                              data={[
                                { name: "Initial Liquidity", value: 70, amount: "$420,000" },
                                { name: "Buybacks & Market Making", value: 15, amount: "$90,000" },
                                { name: "Core Development", value: 10, amount: "$60,000" },
                                { name: "Marketing & Community", value: 5, amount: "$30,000" }
                              ]}
                              cx="50%"
                              cy="50%"
                              outerRadius={180}
                              innerRadius={100}
                              dataKey="value"
                              className="fund-allocation-pie"
                              label={({ value, name }) => `${value}%`}
                              labelLine={false}
                              stroke="rgba(255,255,255,0.1)"
                              strokeWidth={2}
                              isAnimationActive={false}
                              activeIndex={-1}
                            >
                              {[
                                { color: "#3b82f6" },
                                { color: "#f59e0b" },
                                { color: "#8b5cf6" },
                                { color: "#10b981" }
                              ].map((entry, index) => (
                                <Cell 
                                  key={`cell-${index}`} 
                                  fill={entry.color}
                                  stroke="rgba(255,255,255,0.2)"
                                  strokeWidth={1}
                                  data-cell-index={index}
                                  className={`fund-pie-cell-${index}`}
                                  style={{
                                    filter: "drop-shadow(0 4px 8px rgba(0,0,0,0.2))",
                                    transition: "all 0.3s ease",
                                    cursor: "default",
                                    transformOrigin: "center"
                                  }}
                                />
                              ))}
                            </Pie>
                            <Tooltip
                              content={({ active, payload }) => {
                                if (active && payload && payload.length) {
                                  const data = payload[0].payload;
                                  
                                  return (
                                    <div className="bg-white/95 backdrop-blur-sm px-4 py-3 rounded-lg shadow-xl border border-gray-200">
                                      <div className="flex items-center mb-2">
                                        <div 
                                          className="w-3 h-3 rounded-full mr-2" 
                                          style={{ backgroundColor: payload[0].color }}
                                        ></div>
                                        <span className="font-bold text-gray-800">{data.name}</span>
                                      </div>
                                      <div className="text-sm text-gray-600">
                                        <div>Percentage: <span className="font-semibold text-gray-800">{data.value}%</span></div>
                                        <div>Amount: <span className="font-semibold text-gray-800">{data.amount}</span></div>
                                      </div>
                                    </div>
                                  );
                                }
                                return null;
                              }}
                              cursor={false}
                            />
                          </PieChart>
                        </ResponsiveContainer>
                      </div>
                      {/* Center text */}
                      <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
                        <div className="text-white font-bold text-xl mb-2">Presale Fund</div>
                        <div className="text-bera-yellow font-black text-4xl">$600K</div>
                        <div className="text-gray-400 text-lg">Allocation</div>
                      </div>
                    </div>
                  </div>

                  {/* Right side allocation details - sorted by percentage */}
                  <div className="xl:col-span-2 space-y-8">
                    <div id="fund-development-card" className="group p-3 bg-gradient-to-br from-purple-500/15 via-purple-500/10 to-purple-500/5 rounded-xl border border-purple-500/40 hover:border-purple-500/60 transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/20 min-h-[140px]">
                      <div className="flex items-center mb-3">
                        <div className="w-4 h-4 rounded-full bg-purple-500 mr-3 group-hover:scale-110 transition-transform"></div>
                        <span className="text-purple-400 font-bold text-lg">10% Core Development</span>
                        <span className="ml-auto text-white font-bold text-lg">$60,000</span>
                      </div>
                      <p className="text-gray-300 text-sm ml-7 leading-relaxed">Dedicated to the ongoing development of Beraroot infrastructure, DA modules, and tools.</p>
                    </div>
                    
                    <div id="fund-marketing-card" className="group p-3 bg-gradient-to-br from-green-500/15 via-green-500/10 to-green-500/5 rounded-xl border border-green-500/40 hover:border-green-500/60 transition-all duration-300 hover:shadow-lg hover:shadow-green-500/20 min-h-[140px]">
                      <div className="flex items-center mb-3">
                        <div className="w-4 h-4 rounded-full bg-green-500 mr-3 group-hover:scale-110 transition-transform"></div>
                        <span className="text-green-400 font-bold text-lg">5% Marketing & Community</span>
                        <span className="ml-auto text-white font-bold text-lg">$30,000</span>
                      </div>
                      <p className="text-gray-300 text-sm ml-7 leading-relaxed">For strategic partnerships, social campaigns, and branding.</p>
                    </div>
                  </div>
                </div>
              </div>

              {/* Separator line */}
              <div className="w-full h-px bg-gradient-to-r from-transparent via-bera-blue/30 to-transparent mb-12"></div>

              {/* RFA Rewards Allocation */}
              <div>
                <div className="text-center mb-8">
                  <h3 className="text-2xl font-bold text-blue-400 mb-3">
                    Allocation of Received RFA Rewards from Berachain
                  </h3>
                  <p className="text-gray-300 text-lg">Beraroot has already received RFA ecosystem rewards from Berachain. These rewards will be allocated as follows:</p>
                </div>

                <div className="grid grid-cols-1 xl:grid-cols-7 gap-8 items-center">
                  {/* Left side allocation details */}
                  <div className="xl:col-span-2 space-y-8">
                    <div id="rfa-enhance-card" className="group p-3 bg-gradient-to-br from-cyan-500/15 via-cyan-500/10 to-cyan-500/5 rounded-xl border border-cyan-500/40 hover:border-cyan-500/60 transition-all duration-300 hover:shadow-lg hover:shadow-cyan-500/20 min-h-[140px]">
                      <div className="flex items-center mb-3">
                        <div className="w-4 h-4 rounded-full bg-cyan-500 mr-3 group-hover:scale-110 transition-transform"></div>
                        <span className="text-cyan-400 font-bold text-lg">25% Enhance Liquidity</span>
                      </div>
                      <p className="text-gray-300 text-sm ml-7 leading-relaxed">Further strengthen liquidity pools and market depth on Berachain DEX.</p>
                    </div>
                    
                    <div id="rfa-buyback-card" className="group p-3 bg-gradient-to-br from-red-500/15 via-red-500/10 to-red-500/5 rounded-xl border border-red-500/40 hover:border-red-500/60 transition-all duration-300 hover:shadow-lg hover:shadow-red-500/20 min-h-[140px]">
                      <div className="flex items-center mb-3">
                        <div className="w-4 h-4 rounded-full bg-red-500 mr-3 group-hover:scale-110 transition-transform"></div>
                        <span className="text-red-400 font-bold text-lg">25% Buyback & Burn</span>
                      </div>
                      <p className="text-gray-300 text-sm ml-7 leading-relaxed">Reduce circulating supply and support long-term token value appreciation.</p>
                    </div>
                  </div>

                  {/* Center pie chart */}
                  <div className="xl:col-span-3 flex flex-col items-center justify-center">
                    <div className="relative">
                      <div className="h-[450px] w-[450px] md:h-[500px] md:w-[500px]">
                        <ResponsiveContainer width="100%" height="100%">
                          <PieChart>
                            <Pie
                              data={[
                                { name: "Enhance Liquidity", value: 25 },
                                { name: "Buyback & Burn", value: 25 },
                                { name: "Reward Stakers", value: 25 },
                                { name: "Reward DA Users", value: 25 }
                              ]}
                              cx="50%"
                              cy="50%"
                              outerRadius={180}
                              innerRadius={100}
                              dataKey="value"
                              className="rfa-allocation-pie"
                              label={({ value, name }) => `${value}%`}
                              labelLine={false}
                              stroke="rgba(255,255,255,0.1)"
                              strokeWidth={2}
                              isAnimationActive={false}
                              activeIndex={-1}
                            >
                              {[
                                { color: "#06b6d4" },
                                { color: "#ef4444" },
                                { color: "#8b5cf6" },
                                { color: "#10b981" }
                              ].map((entry, index) => (
                                <Cell 
                                  key={`cell-${index}`} 
                                  fill={entry.color}
                                  stroke="rgba(255,255,255,0.2)"
                                  strokeWidth={1}
                                  data-cell-index={index}
                                  className={`rfa-pie-cell-${index}`}
                                  style={{
                                    filter: "drop-shadow(0 4px 8px rgba(0,0,0,0.2))",
                                    transition: "all 0.3s ease",
                                    cursor: "default",
                                    transformOrigin: "center"
                                  }}
                                />
                              ))}
                            </Pie>
                            <Tooltip
                              content={({ active, payload }) => {
                                if (active && payload && payload.length) {
                                  const data = payload[0].payload;
                                  
                                  return (
                                    <div className="bg-white/95 backdrop-blur-sm px-4 py-3 rounded-lg shadow-xl border border-gray-200">
                                      <div className="flex items-center mb-2">
                                        <div 
                                          className="w-3 h-3 rounded-full mr-2" 
                                          style={{ backgroundColor: payload[0].color }}
                                        ></div>
                                        <span className="font-bold text-gray-800">{data.name}</span>
                                      </div>
                                      <div className="text-sm text-gray-600">
                                        <div>Percentage: <span className="font-semibold text-gray-800">{data.value}%</span></div>
                                      </div>
                                    </div>
                                  );
                                }
                                return null;
                              }}
                              cursor={false}
                            />
                          </PieChart>
                        </ResponsiveContainer>
                      </div>
                      {/* Center text */}
                      <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
                        <div className="text-white font-bold text-xl mb-2">RFA Rewards</div>
                        <div className="text-bera-yellow font-black text-4xl">25%</div>
                        <div className="text-gray-400 text-lg">Each</div>
                      </div>
                    </div>
                  </div>

                  {/* Right side allocation details */}
                  <div className="xl:col-span-2 space-y-8">
                    <div id="rfa-stakers-card" className="group p-3 bg-gradient-to-br from-purple-500/15 via-purple-500/10 to-purple-500/5 rounded-xl border border-purple-500/40 hover:border-purple-500/60 transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/20 min-h-[140px]">
                      <div className="flex items-center mb-3">
                        <div className="w-4 h-4 rounded-full bg-purple-500 mr-3 group-hover:scale-110 transition-transform"></div>
                        <span className="text-purple-400 font-bold text-lg">25% Reward $BLUEBERA Stakers</span>
                      </div>
                      <p className="text-gray-300 text-sm ml-7 leading-relaxed">Incentivize long-term holding and network security participation.</p>
                    </div>
                    
                    <div id="rfa-users-card" className="group p-3 bg-gradient-to-br from-green-500/15 via-green-500/10 to-green-500/5 rounded-xl border border-green-500/40 hover:border-green-500/60 transition-all duration-300 hover:shadow-lg hover:shadow-green-500/20 min-h-[140px]">
                      <div className="flex items-center mb-3">
                        <div className="w-4 h-4 rounded-full bg-green-500 mr-3 group-hover:scale-110 transition-transform"></div>
                        <span className="text-green-400 font-bold text-lg">25% Reward DA Service Users</span>
                      </div>
                      <p className="text-gray-300 text-sm ml-7 leading-relaxed">Projects using Beraroot DA solutions will receive additional incentives and rewards.</p>
                    </div>
                  </div>
                </div>
              </div>

              <div className="mt-12 p-6 bg-gradient-to-r from-blue-500/10 to-purple-500/10 rounded-xl border border-blue-500/30">
                <div className="text-center">
                  <p className="text-gray-300 text-lg leading-relaxed">
                    <strong className="text-white text-xl">All on-chain movements will be traceable on Berachain Explorer.</strong> 
                    <span className="block mt-2 text-base">Beraroot is committed to full transparency and responsible treasury management.</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section id="token-utility" className="py-16 scroll-mt-24">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
            <div className="text-center mb-12">
              <h2 className="text-3xl md:text-4xl font-bold text-blue-400 mb-4">Core Functions</h2>
              <div className="w-16 h-1 bg-blue-400 mx-auto rounded-full"></div>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                              <div className="bg-dark-blue-light/40 rounded-2xl p-6 border border-bera-blue/30">
                  <div className="text-bera-yellow text-4xl mb-4"><Emoji emoji="🔐" size={40} /></div>
                  <h3 className="text-white font-bold text-lg mb-3">Staking Rewards</h3>
                  <p className="text-gray-300 text-sm leading-relaxed">Earn rewards by staking and securing the Beraroot network.</p>
                </div>
                <div className="bg-dark-blue-light/40 rounded-2xl p-6 border border-bera-blue/30">
                  <div className="text-blue-400 text-4xl mb-4"><Emoji emoji="💳" size={40} /></div>
                  <h3 className="text-white font-bold text-lg mb-3">Transaction Fees</h3>
                  <p className="text-gray-300 text-sm leading-relaxed">Used to pay for data availability and processing within the DA layer.</p>
                </div>
                <div className="bg-dark-blue-light/40 rounded-2xl p-6 border border-bera-blue/30">
                  <div className="text-purple-400 text-4xl mb-4"><Emoji emoji="🖥️" size={40} /></div>
                  <h3 className="text-white font-bold text-lg mb-3">Node Incentives</h3>
                  <p className="text-gray-300 text-sm leading-relaxed">Reward validators and DA nodes for honest participation and uptime.</p>
                </div>
                <div className="bg-dark-blue-light/40 rounded-2xl p-6 border border-bera-blue/30">
                  <div className="text-green-400 text-4xl mb-4"><Emoji emoji="🗳️" size={40} /></div>
                  <h3 className="text-white font-bold text-lg mb-3">Governance</h3>
                  <p className="text-gray-300 text-sm leading-relaxed">Vote on key protocol upgrades and ecosystem decisions.</p>
                </div>
                <div className="bg-dark-blue-light/40 rounded-2xl p-6 border border-bera-blue/30">
                  <div className="text-yellow-400 text-4xl mb-4"><Emoji emoji="🪂" size={40} /></div>
                  <h3 className="text-white font-bold text-lg mb-3">Cross-Ecosystem Airdrops</h3>
                  <p className="text-gray-300 text-sm leading-relaxed">Receive future airdrops from integrated PoL-based rollups and partners.</p>
                </div>
                <div className="bg-dark-blue-light/40 rounded-2xl p-6 border border-bera-blue/30">
                  <div className="text-red-400 text-4xl mb-4"><Emoji emoji="📈" size={40} /></div>
                  <h3 className="text-white font-bold text-lg mb-3">Long-Term Value Alignment</h3>
                  <p className="text-gray-300 text-sm leading-relaxed">Tightly linked to the growth of the Berachain PoL ecosystem.</p>
                </div>
            </div>
          </div>
        </section>


        <Footer />

        <div className="fixed bottom-8 right-8 z-50">
          <button
            onClick={() => {
              const walletSection = document.getElementById('wallet-connect');
              if (walletSection) {
                walletSection.scrollIntoView({ 
                  behavior: 'smooth',
                  block: 'center'
                });
              }
            }}
            className="group relative bg-gradient-to-r from-blue-600 to-bera-yellow hover:from-blue-700 hover:to-bera-yellow/80 text-white font-bold py-4 px-6 rounded-full shadow-2xl transition-all duration-300 transform hover:scale-110 hover:-translate-y-1"
          >
            <div className="absolute inset-0 bg-gradient-to-r from-blue-600/50 to-bera-yellow/50 rounded-full blur-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 -z-10"></div>
            
            <div className="flex items-center space-x-2">
              <Emoji emoji="💰" size={16} />
              <span className="text-base font-bold">Join Presale</span>
              <Emoji emoji="🚀" size={18} className="animate-bounce" />
            </div>
            
            <div className="absolute -top-12 left-1/2 transform -translate-x-1/2 bg-dark-blue-light/90 text-white px-3 py-1 rounded-lg text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap border border-bera-yellow/30">
              <div className="text-center">
                <div className="text-bera-yellow font-bold">$0.02 / Token</div>
                <div className="text-xs text-gray-300">Presale Price</div>
              </div>
              <div className="absolute top-full left-1/2 transform -translate-x-1/2 border-4 border-transparent border-t-dark-blue-light/90"></div>
            </div>
          </button>
        </div>
      </div>
      

      <style jsx global>{`
        .recharts-pie-label-text {
          font-weight: 500;
          font-size: 14px;
          fill: white;
          text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
        }

        .recharts-pie-label-line {
          stroke: rgba(255, 255, 255, 0.3);
          stroke-width: 1px;
        }

        /* Pie chart hover effects */
        .recharts-pie-sector {
          transition: all 0.3s ease !important;
          transform-origin: center !important;
          cursor: default !important;
        }

        .recharts-pie-sector:hover {
          transform: scale(1.08) !important;
          filter: brightness(1.3) drop-shadow(0 0 20px currentColor) drop-shadow(0 0 40px currentColor) !important;
        }

        .pie-cell-0:hover {
          filter: brightness(1.15) drop-shadow(0 0 4px #06b6d4) drop-shadow(0 0 8px #06b6d440) drop-shadow(0 4px 8px rgba(0,0,0,0.2)) !important;
        }

        .pie-cell-1:hover {
          filter: brightness(1.15) drop-shadow(0 0 4px #f59e0b) drop-shadow(0 0 8px #f59e0b40) drop-shadow(0 4px 8px rgba(0,0,0,0.2)) !important;
        }

        .pie-cell-2:hover {
          filter: brightness(1.15) drop-shadow(0 0 4px #ef4444) drop-shadow(0 0 8px #ef444440) drop-shadow(0 4px 8px rgba(0,0,0,0.2)) !important;
        }

        .pie-cell-3:hover {
          filter: brightness(1.15) drop-shadow(0 0 4px #ec4899) drop-shadow(0 0 8px #ec489940) drop-shadow(0 4px 8px rgba(0,0,0,0.2)) !important;
        }

        .pie-cell-4:hover {
          filter: brightness(1.15) drop-shadow(0 0 4px #3b82f6) drop-shadow(0 0 8px #3b82f640) drop-shadow(0 4px 8px rgba(0,0,0,0.2)) !important;
        }

        .pie-cell-5:hover {
          filter: brightness(1.15) drop-shadow(0 0 4px #10b981) drop-shadow(0 0 8px #10b98140) drop-shadow(0 4px 8px rgba(0,0,0,0.2)) !important;
        }

        /* Fund Allocation pie chart hover effects */
        .fund-pie-cell-0:hover {
          filter: brightness(1.15) drop-shadow(0 0 4px #3b82f6) drop-shadow(0 0 8px #3b82f640) drop-shadow(0 4px 8px rgba(0,0,0,0.2)) !important;
        }

        .fund-pie-cell-1:hover {
          filter: brightness(1.15) drop-shadow(0 0 4px #f59e0b) drop-shadow(0 0 8px #f59e0b40) drop-shadow(0 4px 8px rgba(0,0,0,0.2)) !important;
        }

        .fund-pie-cell-2:hover {
          filter: brightness(1.15) drop-shadow(0 0 4px #8b5cf6) drop-shadow(0 0 8px #8b5cf640) drop-shadow(0 4px 8px rgba(0,0,0,0.2)) !important;
        }

        .fund-pie-cell-3:hover {
          filter: brightness(1.15) drop-shadow(0 0 4px #10b981) drop-shadow(0 0 8px #10b98140) drop-shadow(0 4px 8px rgba(0,0,0,0.2)) !important;
        }

        /* RFA allocation pie chart hover effects */
        .rfa-pie-cell-0:hover {
          filter: brightness(1.15) drop-shadow(0 0 4px #06b6d4) drop-shadow(0 0 8px #06b6d440) drop-shadow(0 4px 8px rgba(0,0,0,0.2)) !important;
        }

        .rfa-pie-cell-1:hover {
          filter: brightness(1.15) drop-shadow(0 0 4px #ef4444) drop-shadow(0 0 8px #ef444440) drop-shadow(0 4px 8px rgba(0,0,0,0.2)) !important;
        }

        .rfa-pie-cell-2:hover {
          filter: brightness(1.15) drop-shadow(0 0 4px #8b5cf6) drop-shadow(0 0 8px #8b5cf640) drop-shadow(0 4px 8px rgba(0,0,0,0.2)) !important;
        }

        .rfa-pie-cell-3:hover {
          filter: brightness(1.15) drop-shadow(0 0 4px #10b981) drop-shadow(0 0 8px #10b98140) drop-shadow(0 4px 8px rgba(0,0,0,0.2)) !important;
        }

        /* Disable click selection */
        .recharts-pie .recharts-pie-sector {
          outline: none !important;
          pointer-events: auto !important;
        }

        .recharts-pie .recharts-pie-sector:focus {
          outline: none !important;
          box-shadow: none !important;
        }

        .recharts-pie .recharts-pie-sector:active {
          outline: none !important;
          box-shadow: none !important;
        }

        .recharts-pie-sector[tabindex] {
          outline: none !important;
        }

        .recharts-pie-sector {
          pointer-events: auto !important;
        }

        /* Completely disable Recharts default selection state */
        .recharts-active-shape {
          display: none !important;
        }

        .recharts-pie .recharts-sector {
          outline: none !important;
        }

        .custom-scrollbar::-webkit-scrollbar {
          width: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
          background: rgba(45, 55, 72, 0.3);
          border-radius: 3px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
          background: linear-gradient(to bottom, #3b82f6, #fbbf24);
          border-radius: 3px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
          background: linear-gradient(to bottom, #2563eb, #f59e0b);
        }
        

        input[type="number"]::-webkit-outer-spin-button,
        input[type="number"]::-webkit-inner-spin-button {
          -webkit-appearance: none;
          margin: 0;
        }
        
        input[type="number"] {
          -moz-appearance: textfield;
        }
        
        .no-spinner::-webkit-outer-spin-button,
        .no-spinner::-webkit-inner-spin-button {
          -webkit-appearance: none;
          margin: 0;
        }
      `}</style>
    </main>
  )
} 